<template>
	<div class="loadingBox">
		<div class="loadEffect">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
		{{title}}
	</div>
</template>

<script>
	export default{
		props:['title'],
		data(){
			return{
				
			}
		}
	}
</script>

<style scoped>
	.loadingBox{
		position:absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:1000
	}
	.loadEffect{
		width: 50px;
		height: 50px;
		position: relative;
		margin: 0 auto 10px;
	}
	.loadEffect span{
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #666;
		position: absolute;
		-webkit-animation: load 1.04s ease infinite;
	}
	@-webkit-keyframes load{
		0%{
			opacity: 1;
		}
		100%{
			opacity: 0.2;
		}
	}
	.loadEffect span:nth-child(1){
		left: 2px;
		top: 50%;
		margin-top:-6px;
		-webkit-animation-delay:0.13s;
	}
	.loadEffect span:nth-child(2){
		left: 8px;
		top: 8px;
		-webkit-animation-delay:0.26s;
	}
	.loadEffect span:nth-child(3){
		left: 50%;
		top: 2px;
		margin-left: -5px;
		-webkit-animation-delay:0.39s;
	}
	.loadEffect span:nth-child(4){
		top: 8px;
		right:8px;
		-webkit-animation-delay:0.52s;
	}
	.loadEffect span:nth-child(5){
		right: 2px;
		top: 50%;
		margin-top:-4px;
		-webkit-animation-delay:0.65s;
	}
	.loadEffect span:nth-child(6){
		right: 8px;
		bottom:8px;
		-webkit-animation-delay:0.78s;
	}
	.loadEffect span:nth-child(7){
		bottom: 3px;
		left: 53%;
		margin-left: -8px;
		-webkit-animation-delay:0.91s;
	}
	.loadEffect span:nth-child(8){
		bottom: 11px;
		left: 5px;
		-webkit-animation-delay:1.04s;
	}
</style>